<template>
    <div>
        <!-- 基础信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">基础信息</h3>
                <div class="info-row">
                    <div class="info-item">订单状态：<span></span></div>
                    <div class="info-item">始发地：<span></span></div>
                    <div class="info-item">配送方式：<span></span></div>
                    <div class="info-item">创建时间：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">订单号：<span></span></div>
                    <div class="info-item">目的地：<span></span></div>
                    <div class="info-item">合同：<span></span></div>
                    <div class="info-item">客户名称：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">运输类型：<span></span></div>
                    <div class="info-item">下单时间：<span></span></div>
                    <div class="info-item">客户编码：<span></span></div>
                    <div class="info-item">货物类型：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">订单来源：<span></span></div>
                    <div class="info-item">最后更新时间：<span></span></div>
                    <div class="info-item">最后更新人：<span></span></div>
                    <div class="info-item"></div> <!-- 空白占位符 -->
                </div>
            </div>
        </el-card>

        <!-- 发货信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #dc780e;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">发货信息</h3>
                <div class="info-row">
                    <div class="info-item">联系人姓名：<span></span></div>
                    <div class="info-item">联系电话：<span></span></div>
                    <div class="info-item">发货地址：<span></span></div>
                </div>
                <div>
                    <div class="info-item">计划发货时间：<span></span></div>
                </div>
            </div>
        </el-card>

        <!-- 收货信息区域 -->
        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #13d941;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">收货信息</h3>
                <div class="info-row">
                    <div class="info-item">联系人姓名：<span></span></div>
                    <div class="info-item">联系电话：<span></span></div>
                    <div class="info-item">收货地址：<span></span></div>
                </div>
                <div>
                    <div class="info-item">计划收货时间：<span></span></div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">货物信息</h3>
                <el-table :data="tableData" style="width: 100%" border>
                    <el-table-column prop="serial" label="序号" width="50"></el-table-column>
                    <el-table-column prop="name" label="货物名称"></el-table-column>
                    <el-table-column prop="quantity" label="数量"></el-table-column>
                    <el-table-column prop="volume" label="体积 (m³)"></el-table-column>
                    <el-table-column prop="weight" label="重量 (kg)"></el-table-column>
                </el-table>
                <div class="total-info">
                    合计：
                    <div>总数量：<span></span>箱</div>
                    <div>总体积：<span></span>m³</div>
                    <div>总质量：<span></span>kg</div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">需求车辆</h3>
                <div class="info-row">
                    <div class="info-item">车型：<span></span></div>
                    <div class="info-item">车长：<span></span></div>
                    <div class="info-item">用车数量：<span></span></div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">费用信息</h3>
                <div class="info-row">
                    <div class="info-item">计费方式：<span></span></div>
                    <div class="info-item">运输费：<span></span></div>
                    <div class="info-item">保险费：<span></span></div>
                    <div class="info-item">包装费：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">装卸费：<span></span></div>
                    <div class="info-item">中转费：<span></span></div>
                    <div class="info-item">燃油费：<span></span></div>
                    <div class="info-item">服务费：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item">其他费用：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item" style="color: red;">费用合计：<span></span></div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">付款方式</h3>
                <div class="info-row">
                    <div class="info-item">现付：<span></span></div>
                    <div class="info-item">预付：<span></span></div>
                    <div class="info-item">到付：<span></span></div>
                    <div class="info-item">周期付：<span></span></div>
                </div>
                <div class="info-row">
                    <div class="info-item" style="color: red;">费用合计：<span></span></div>
                </div>
            </div>
        </el-card>

        <el-card class="box-card">
            <div class="info-section">
                <h3 style="font-size: 18px;font-weight: bold;color: #ffffff;background-color: #409EFF;display: inline-block;
                           padding: 5px 10px;margin-bottom: 10px;border-radius: 4px;">订单备注</h3>
                <div class="info-row">
                    <div class="info-item"><span></span></div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            orderId:'',
            tableData:[]
        }
    },

    methods: {
    },
    created(){
        this.orderId = this.$route.query.orderId;
        console.log(this.orderId);
        
    }
}
</script>

<style scoped>
.box-card {
    margin-bottom: 20px;
}

.info-section {
    margin: 10px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info-item {
    flex-basis: 23%;
    /* 每个项目占据行宽的近似四分之一 */
    margin: 0 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.info-item span {
    margin-left: 10px;
}

.total-info {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
    font-weight: bold;
}

.total-info div {
    margin-left: 20px;
}

.section-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;
    background-color: #13d941;
    display: inline-block;
    padding: 5px 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}
</style>